<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body class="bg-gray-100">
<div class="max-w-3xl mx-auto mt-10 bg-white p-8 shadow-md rounded-lg">
    <h2 class="text-2xl font-bold mb-6 text-center">学生注册</h2>
    <form action="#" id="regForm" class="space-y-4">
        <!-- 学号 -->
        <div>
            <label class="block font-medium">学号</label>
            <input type="text" name="studentId" id="studentId_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 姓名 -->
        <div>
            <label class="block font-medium">姓名</label>
            <input type="text" name="name" id="name_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 性别 -->
        <div>
            <label class="block font-medium">性别</label>
            <select name="gender" id="gender_input" required class="w-full border p-2 rounded">
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>

        <!-- 出生日期 -->
        <div>
            <label class="block font-medium">出生日期</label>
            <input type="date" name="birthDate" id="birthDate_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 身份证号 -->
        <div>
            <label class="block font-medium">身份证号</label>
            <input type="text" name="idCard" id="idCard_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 学院 -->
        <div>
            <label class="block font-medium">学院</label>
            <input type="text" name="college" id="college_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 专业 -->
        <div>
            <label class="block font-medium">专业</label>
            <input type="text" name="major" id="major_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 班级 -->
        <div>
            <label class="block font-medium">班级</label>
            <input type="text" name="className" id="className_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 学籍状态 -->
        <div>
            <label class="block font-medium">学籍状态</label>
            <select name="status" id="status_input" required class="w-full border p-2 rounded">
                <option value="0">在读</option>
                <option value="1">休学</option>
                <option value="2">退学</option>
                <option value="3">毕业</option>
                <option value="4">结业</option>
            </select>
        </div>

        <!-- 宿舍ID -->
        <div>
            <label class="block font-medium">宿舍ID</label>
            <input type="text" name="dormId" id="dormId_input" class="w-full border p-2 rounded"/>
        </div>

        <!-- 床位号 -->
        <div>
            <label class="block font-medium">床位号</label>
            <input type="number" name="bedNumber" id="bedNumber_input" class="w-full border p-2 rounded"/>
        </div>

        <!-- 手机号 -->
        <div>
            <label class="block font-medium">手机号</label>
            <input type="text" name="phone" id="phone_input" class="w-full border p-2 rounded"/>
        </div>

        <!-- 邮箱 -->
        <div>
            <label class="block font-medium">邮箱</label>
            <input type="email" name="email" id="email_input" class="w-full border p-2 rounded"/>
        </div>

        <!-- 紧急联系人 -->
        <div>
            <label class="block font-medium">紧急联系人</label>
            <input type="text" name="emergencyContact" id="emergencyConcat_input" class="w-full border p-2 rounded"/>
        </div>

        <!-- 登录账号 -->
        <div>
            <label class="block font-medium">登录账号</label>
            <input type="text" name="username" id="username_input" required class="w-full border p-2 rounded"/>
        </div>

        <!-- 密码 -->
        <div>
            <label class="block font-medium">密码</label>
            <input type="password" name="password" id="password_input" required class="w-full border p-2 rounded"/>
        </div>
    </form>
    <!-- 提交按钮 -->
    <div class="text-center pt-4">
        <button onclick="doRegister()" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
            注册
        </button>
    </div>
</div>
<script>
    function doRegister() {
        const studentId = $("#studentId_input").val()
        const name = $("#name_input").val()
        const gender = $("#gender_input").val()
        const birthDate = $("#birthDate_input").val()
        const idCard = $("#idCard_input").val()
        const college = $("#college_input").val()
        const major = $("#major_input").val()
        const className = $("#className_input").val()
        const status = $("#status_input").val()
        const dormId = $("#dormId_input").val()
        const bedNumber = $("#bedNumber_input").val()
        const phone = $("#phone_input").val()
        const email = $("#email_input").val()
        const emergencyContact = $("#emergencyConcat_input").val()
        const username = $("#username_input").val()
        const password = $("#password_input").val()
        $.ajax({
            url: '/doRegister',
            method: 'POST',
            data: {
                studentId: studentId,
                name: name,
                gender: gender,
                birthDate: birthDate,
                idCard: idCard,
                college: college,
                major: major,
                className: className,
                status: status,
                dormId: dormId,
                bedNumber: bedNumber,
                phone: phone,
                email: email,
                emergencyContact: emergencyContact,
                username: username,
                password: password
            },
            success: function (res) {
                if (res.code === 200) {
                    alert("注册成功")
                    window.location = '/dormitory'
                } else {
                    alert("注册失败")
                }
            }
        })
    }
</script>
</body>
</html>